<!-- 雷达图 https://echarts.apache.org/examples/zh/editor.html?c=radar -->
<template>
    <div class="chart-container">
        <div ref="chart" class="chart"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";

export default {
    props: {
        list: {
            type: Array,
            required: true,
        },
    },
    mounted() {
        this.renderChart();
    },
    watch: {
        list: {
            handler() {
                this.renderChart();
            },
            deep: true,
        },
    },
    methods: {
        renderChart() {
            const chartDom = this.$refs.chart;
            const myChart = echarts.init(chartDom, "");
            const option = this.generateOption();
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        generateOption() {
            const indicator = [
                { name: "投注性", name2: "A" },
                { name: "領導性", name2: "B" },
                { name: "冒險性", name2: "C" },
                { name: "迅速性", name2: "D" },
                { name: "活動性", name2: "E" },
                { name: "社交性", name2: "F" },
                { name: "思考性", name2: "G" },
                { name: "細緻性", name2: "H" },
                { name: "條理性", name2: "I" },
                { name: "穩定性", name2: "J" },
                { name: "意志力", name2: "a" },
                { name: "成就需求", name2: "b" },
                { name: "統御需求", name2: "c" },
                { name: "表現慾", name2: "d" },
                { name: "合群性", name2: "e" },
                { name: "親和需求", name2: "f" },
                { name: "喜新性", name2: "g" },
                { name: "批判性", name2: "h" },
                { name: "崇拜性", name2: "i" },
                { name: "受役性", name2: "j" }
            ];

            console.log('initChart', this.list)
            const values = this.list.map((item) => item.total);


            const option = {
                title: {
                    text: "",
                },

                radar: {
                    indicator: indicator,
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: "radar",
                        data: [
                            {
                                value: values,
                                name: 'Actual Spending'
                            }
                        ]
                    },
                ],
            };

            return option;
        },
    },
};
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  .chart-container {
    // 允许图表容器根据需要自动调整大小，以均匀填充可用空间
    flex: 1;
    margin: 0px 10px 10px 0;
  }
  @media (max-width: 600px) {
    .chart-container {
      flex-basis: 100%;
    }
  }

  .chart {
    width: 375px;
    height: 400px;
    // display: inline-flex; // 或者使用 inline-flex inline-block
    // box-sizing: border-box; // 内边距和边框的尺寸会被包含在这个 with 的范围内, 默认 content-box
  }
  
  </style>
  